<template>
	<!-- 我的评价 -->
	<view class="container">
		<!-- 标题 -->
		<headTitle title="我的评价" :mycomment="true" :mine="true"></headTitle>
		<view class="navbar bgfff flex-center-between">
			<view v-for="(item, index) in navList" :key="index" @click="tabClick(index)"
				class="nav-item" :class="{ current: tabCurrentIndex === index }">
				{{ item + ' ' + (tabCurrentIndex === index ? total || '' : '') }}
			</view>
		</view>
		
		<view class="content" v-if="!isEmpty && tabCurrentIndex === 0">
			<view class="goods-box bgfff" v-for="(item, index) in commentList" :key="index">
				<view class="goods-box-single" v-for="(val, idx) in item.evaluationOrders" :key="idx">
					<img class="goods-img" :src="val.productPic" mode="aspectFill"></img>
					<view class="right flex-column-between">
						<view class="info flex-column">
							<view class="title show-two-text font28 color333">{{ val.productName }}</view>
							<view class="attr-box show-one-text font24 color999">{{ val.productAttr }}</view>
						</view>
						<view class="prcie-b flex-center-between">
							<view class="price flex-center">
								<text class="font24 color333">￥</text>
								<text class="font30 color333 fontb">{{ val.productPrice }}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="goods-btn flex-center">
					<button class="font28 colorfff" @tap="toEvaluate(item.id)">评价</button>
				</view>
			</view>
		</view>
		
		<view class="content" v-if="!isEmpty && tabCurrentIndex === 1">
			<comment :comment="item" v-for="(item, index) in commentList" :key="index" @openPhoto="openPhoto" type="all" @like="like" :index="index" op="my" @commentOp='commentOp'></comment>
		</view>
		
		<uni-load-more :status="loadingType" v-if="!isEmpty"></uni-load-more>
		<!-- 空白页 -->
		<empty :title="titles[tabCurrentIndex]" v-if="isEmpty"></empty>
		<!-- 预览图片 -->
		<previewImg v-if="openImg" @close="close" :cureent="currentImg" :arr="arrImg"></previewImg>
	</view>
</template>

<script>
import Api from '@/common/api'
import comment from '@/components/comment'
import previewImg from '@/components/preview-img'
import empty from '@/components/empty'
import headTitle from '@/components/head-title.vue'
import uniLoadMore from '@/components/uni-load-more/uni-load-more'
export default {
	data() {
		return {
			total: 0, // 总条数
			tabCurrentIndex: 0,
			navList: ['待评价', '已评价'],
			titles: ['暂无可评论订单', '暂无评价'],
			pageNum: 1,
			loadingType: 'more', //加载更多状态
			isEmpty: false, // 不为空
			commentList: [], // 评价列表
			openImg: false, // 展示图片
			arrImg: [], // 图片数组
			currentImg: 0, // 当前选中图片
		}
	},
	onLoad(opt) {
		if(opt.status) {
			this.tabCurrentIndex = 1
		}
		this.getData('refresh')
	},
	// 加载更多
	onReachBottom() {
		this.pageNum += 1
		this.getData()
	},
	methods: {
		// 去评价
		toEvaluate(orderId) {
			this.$common.navigateTo('/pages/comment/publishComment?orderId=' + orderId)
		},
		// 评论操作
		commentOp(type, flag, index) {
			this.commentList[+index][type] = flag
		},
		// 点赞或取消点赞
		like(flag, index) {
			let num = this.commentList[index].praise
			this.commentList[index].praise = flag ? num + 1 : num - 1
			this.commentList[index].isPraise = flag
		},
		//顶部tab点击
		tabClick(index) {
			this.tabCurrentIndex = index
			this.pageNum = 1
			this.getData('refresh')
		},
		// 打开图片
		openPhoto(img) {
			let num = 0
			this.arrImg = []
			this.commentList.map(item => {
				// 评论有图片
				if(item.images.length) {
					item.images.map(val => {
						if(img === val) {
							this.currentImg = num
						}
						++num
						this.arrImg.push({
							img: val,
							content: {
								name: item.memberName,
								attr: item.attr,
								text: item.consultContent,
							}
						})
					})
				}
			})
			this.openImg = true
		},
		// 关闭轮播图
		close(flag) {
			this.openImg = flag 
		},
		/**
		 * 获取列表数据
		 */
		async getData(type = 'add'){
		    // 没有更多直接返回
			if (type === 'add') {
				if (this.loadingType === 'nomore') {
					return
				}
				this.loadingType = 'loading'
			} else {
				this.loadingType = 'loading'
				// this.loadingType = 'more'
			}
			
			
			this.total = 0
			let isLoading = false
 			if (type === 'refresh') {
				this.isEmpty = false
				this.commentList = []
				isLoading = true
			}
			
			// 待评价
			let url = Api.goods.getStayComment
			if (this.tabCurrentIndex === 1) {
				// 已评价
				url = Api.goods.getCompleteComment
			}
			let list = await Api.apiCall('get', url, { 
				pageIndex: this.pageNum,
				pageSize: 10,
			}, isLoading)
			if(!list) return
			
			let commentList = list.recordList
			this.total = list.total
			this.commentList = this.commentList.concat(commentList)
			
			if(this.commentList.length === 0) {
				// 显示无评价
				this.isEmpty = true
			}
			
			// 判断是否有下一页数据
			this.loadingType = list.hasMore == 0 ? 'nomore' : 'more'
		},
	},
	components: {
		headTitle,
		uniLoadMore,
		empty,
		comment,
		previewImg,
	}
}
</script>

<style lang="scss">
page {
	background-color: #F5F5F5;
}

.container {
	padding-top: 178rpx;
}

.navbar {
	width: 100%;
	height: 90rpx;
	padding: 0 130rpx;
	position: fixed;
	top: 88rpx;
	left: 0;
	border-bottom: 1rpx solid #eee;
	z-index: 10;
	.nav-item {
		height: 100%;
		line-height: 90rpx;
		font-size: 28rpx;
		color: #AEA8A2;
		position: relative;
		&.current {
			font-size: 34rpx;
			font-weight: bold;
			color: #333;
			&:after {
				content: '';
				position: absolute;
				left: 0;
				bottom: 0;
				width: 34rpx;
				height: 6rpx;
				background-color: #333;
				border-radius: 5rpx;
			}
		}
	}
}

.content {
	margin-top: 16rpx;
}

.goods-box {
	margin-bottom: 20rpx;
	box-shadow:0px 2px 10px 0px rgba(153,153,153,0.2);
	.goods-box-single {
		display: flex;
		padding: 50rpx 40rpx;
		border-bottom: 1rpx solid #DDD;
		.goods-img {
			width: 178rpx;
			height: 178rpx;
			border-radius: 3rpx;
			margin-right: 21rpx;
		}
		.right {
			width: calc(100% - 200rpx);
			height: 178rpx;
			.info {
				transform: translateY(-2px);
				.title {
					line-height: 42rpx;
				}
				.attr-box {
					margin-top: 12rpx;
				}
			}
			.prcie-b {
				transform: translateY(5px);
				.price {
					align-items: baseline;
				}
				.red {
					width: 132rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					border-radius: 35rpx;
					border: 1rpx solid #DC392F;
					color: #C84739;
				}
			}
		}
	}
	.goods-btn {
		justify-content: flex-end;
		height: 104rpx;
		margin-right: 50rpx;
		button {
			padding: 0;
			margin: 0;
			width: 160rpx;
			height: 64rpx;
			line-height: 64rpx;
			border-radius: 32rpx;
			background-color: #C84739;
			&::after {
				border: 0;
			}
		}
	}
}
</style>
